<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			解绑私卡
		</view>
		<view class="show">
			<view class="tap" >
				<view class="taptxt">
					结算账户指定书图片
				</view>
				<view class="tapone">
					<view class="add-img-item" v-show="authorizationForSettlementsrc">
						<image class="add-img1" :src="authorizationForSettlementsrc" mode="aspectFit">
							<image class="add-img-del" @click="delImg(0)" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
						</image>
					</view>
					<view v-show="!authorizationForSettlementsrc" class="add-img-item" @click="openCamera(0)">
						<image class="add-img" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//add.png"></image>
					</view>
				</view>
			</view>
			<view class="tap" >
				<view class="taptxt">
					持卡人手持身份证照
				</view>
				<view class="tapone">
					<view class="add-img-item" v-show="handheldOfIdCardsrc">
						<image class="add-img1" :src="handheldOfIdCardsrc" mode="aspectFit">
							<image class="add-img-del" @click="delImg(1)" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
						</image>
					</view>
					<view v-show="!handheldOfIdCardsrc" class="add-img-item" @click="openCamera(1)">
						<image class="add-img" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//add.png"></image>
					</view>
				</view>
			</view>
			<view class="tap" >
				<view class="taptxt">
					持卡人手持银行卡照
				</view>
				<view class="tapone">
					<view class="add-img-item" v-show="handheldOfBankCardsrc">
						<image class="add-img1" :src="handheldOfBankCardsrc" mode="aspectFit">
							<image class="add-img-del" @click="delImg(2)" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
						</image>
					</view>
					<view v-show="!handheldOfBankCardsrc" class="add-img-item" @click="openCamera(2)">
						<image class="add-img" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//add.png"></image>
					</view>
				</view>
			</view>
			<view class="one">
				<span>变更后结算卡号：</span><input placeholder="请输入变更后结算卡号" v-model="updateAccountNo"/>
			</view>
			<view class="one">
				<span>变更后联行号：</span><input placeholder="请输入变更后联行号" v-model="updateBankCode"/>
			</view>
			<view class="dibu" @click="gobtn()">
				提交
			</view>
		</view>


	</view>
</template>

<script>
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
		},
		mounted() {

		},

		data() {
			return {
				authorizationForSettlement:'',//结算账户指定书图片
				authorizationForSettlementsrc:'',//结算账户指定书图片路径
				handheldOfIdCard:'',//持卡人手持身份证照
				handheldOfIdCardsrc:'',//持卡人手持身份证照路径
				handheldOfBankCard:'',//持卡人手持银行卡照
				handheldOfBankCardsrc:'',//持卡人手持银行卡照路径
				updateAccountNo:'',//变更后结算卡号
				updateBankCode:'',//变更后联行号
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			
			
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.redirectTo({
					url: '../withdrawal_management/withdrawal_management'
				})	
			},
			
			//删除图片
			delImg(key) {
				if(key==0){
					this.authorizationForSettlement=''
					this.authorizationForSettlementsrc=''
				}else if(key==1){
					this.handheldOfIdCardsrc=''
					this.handheldOfIdCardsrcsrc=''
				}else if(key==2){
					this.handheldOfBankCardsrc=''
					this.handheldOfBankCardsrcsrc=''
				}
			},
			openCamera(key) {
				uni.chooseImage({
					// sourceType: ['camera'],
					count: 1,
					sizeType: ['compressed'],
					success: res => {
						if(key==0){
							this.authorizationForSettlementsrc=res.tempFilePaths[0]
							this.authorizationForSettlement=res.tempFiles[0]
						}else if(key==1){
							this.handheldOfIdCardsrc=res.tempFilePaths[0]
							this.handheldOfIdCard=res.tempFiles[0]
						}else if(key==2){
							this.handheldOfBankCardsrc=res.tempFilePaths[0]
							this.handheldOfBankCard=res.tempFiles[0]
						}
						
					}
				});
			
			},
			gobtn(){
				
				uni.showLoading({
					title: '加载中...'
				})
				let userToken = uni.getStorageSync('userToken');
				let files=[
					{'name':'authorizationForSettlement','file':this.authorizationForSettlement,'uri':this.authorizationForSettlementsrc},
					{'name':'handheldOfIdCard','file':this.handheldOfIdCard,'uri':this.handheldOfIdCardsrc},
					{'name':'handheldOfBankCard','file':this.handheldOfBankCard,'uri':this.handheldOfBankCardsrc}
				]
				
				let data={
					updateAccountNo:this.updateAccountNo,
					updateBankCode:this.updateBankCode,		
				}
				uni.uploadFile({
					url: Config.api + 'manager/heli/change/card',
					files: files,
					formData:data,
					header: {
						Authorization: "Bearer " + userToken
					},
					success: res => {
						console.log(res,'8888')
						var arr=JSON.parse(res.data)
						if(arr.code==200){
							uni.hideLoading()
							this.$toast.success(arr.msg)
							setTimeout(()=>{
								this.blackbtn()
							},500)
						}else{
							uni.hideLoading()
							this.$toast.fail(arr.msg)
						}
					}
							
				});
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		// background-color: #F5F5F5;

		/deep/.van-list__finished-text {
			margin-top: 100upx;
			padding-bottom: 200upx;
		}

		/deep/.van-hairline--top-bottom::after {
			border-width: 0;
		}
		.hand{
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;  
			-moz-text-size-adjust: 100% !important;
			width: 100%;
			background-color: #4B98ED;
			font-size: 30upx;
			padding: 20upx 0;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 22upx;
			}
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			padding: 32upx;
			.tap{
				width: 100%;
				box-sizing: border-box;
				background-color: #c7c7c7;
				border-radius:20upx ;
				text-align: center;
				padding: 20upx;
				margin-bottom: 20upx;
				.taptxt{
					font-size: 26upx;
					font-weight: 700;
					margin-bottom: 20upx;
					span{
						color: #50a1f3;
					}
				}
				.tapone{
					width: 100%;
					height: 300upx;
					box-sizing: border-box;
					.add-img-item {
						width: 100%;
						height: 300upx;
						border-radius: 20upx;
						box-sizing: border-box;
					}
					.add-img {
						width: 128upx;
						height: 128upx;
						border-radius: 16upx;
						margin-top: 80upx;
					}
					.add-img1 {
						width: 65%;
						height: 300upx;
						border-radius: 16upx;
						margin: 0 auto;
						border: 4upx solid #fff;
						position: relative;
					}
								
					.add-img-del {
						position: absolute;
						width: 40rpx;
						height: 40rpx;
						right: 146upx;
						// top: -6upx;
						border-radius: 20rpx;
					}
								
					
				}
			}
			.one{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				padding: 20upx 0;
				
				span{
					font-size: 28upx;
					color: #333;
					font-weight: 700;
				}
				input{
					width:62%;
					background-color: #c8c8c8;
					border-radius: 20upx;
					padding: 20upx ;
					font-size: 28upx;
					font-weight: 700;
				}
				/deep/.uni-input-placeholder{
					font-size: 28upx;
					color: #b4b4b4;
				}
			}
			.dibu{
				width: 600upx;
				border-radius: 20upx;
				background-color: #4B98ED;
				color: #ffffff;
				text-align: center;
				padding: 20upx 0;
				margin: 100upx auto;
			}
			
		}
		
		

	}
</style>
